<template>
	<div class="table-wrapper">
		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" :height="tableHeight" class="stock-table">
			<el-table-column label="商品信息" width="400">
				<template #default="scope">
					<div class="flex goods-item">
						<div style="width: 80px; height: 80px">
							<el-image :src="STATIC_URL + scope.row.image" />
						</div>
						<div class="right ml15">
							<div class="goods-title">
								{{ scope.row.goodsName }}
							</div>
							<div class="goods-sku-text">
								<span v-for="(sku, index) in scope.row.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="stock" label="当前库存" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="name" label="售后状态" show-overflow-tooltip></el-table-column> -->
			<el-table-column prop="stockWarning" label="预警库存" show-overflow-tooltip></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip width="300"> </el-table-column>
			<el-table-column prop="orderStatus" label="库存状态" show-overflow-tooltip>
				<template #default="scope">
					<span>
						<el-tag v-if="scope.row.warningStatus == 0" type="warning">预警中</el-tag>

						<el-tag v-else type="info">已处理</el-tag>
					</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" show-overflow-tooltip width="200">
				<template #default="scope">
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenRep(scope.row)">补货 </el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination-wrapper">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>

		<StockDialog ref="StockDialogRef" @refresh="getTableData"></StockDialog>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref, computed } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import { goodsStockWarningApi } from '/@/api/goods/stockwarning';
import msg from '/@/utils/messageUtils';
const StockDialog = defineAsyncComponent(() => import('./dialog.vue'));
const StockDialogRef = ref();

// 计算表格精确高度 - 使用CSS calc更准确
const tableHeight = computed(() => {
	return 'calc(100vh - 300px)'; // 精确计算后的固定值
});
const state = reactive({
	isToggle: false,
	search: {
		goodsName: '',
		stockWarningStatus: '' as any,
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};
const getTableData = async () => {
	try {
		state.tableData.loading = true;
		const { data } = await goodsStockWarningApi().search({
			offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
			limit: state.tableData.paging.pageSize,
			orderStatus: state.search.stockWarningStatus,
		});

		console.log('result: ', data);
		state.tableData.data = data.datas;
		state.tableData.paging.currentPage = data.paging.currentPage;
		state.tableData.paging.totalCount = data.paging.totalCount;
		state.tableData.loading = false;
	} catch (e) {
		msg().error('查询失败，请稍后重试');
	}
};

const init = (query: StockWarningQuerySearch) => {
	state.search.stockWarningStatus = query.warningStatus;
	state.tableData.paging.currentPage = 1;
	state.tableData.paging.pageSize = 15;
	getTableData();
};

const onOpenRep = (row: object) => {
	console.log('open: ', row);
	StockDialogRef.value.onOpen(row);
};

defineExpose({ init });
</script>

<style scoped lang="scss">
.table-wrapper {
	display: flex;
	flex-direction: column;
}

.stock-table {
	margin-bottom: 16px;
}

.pagination-wrapper {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
	border-top: 1px solid #ebeef5;
	padding-left: 16px;
}
</style>
